<script setup lang="ts">
import { useRoute } from 'vue-router';
const id = useRoute().params.id;
import { http } from '@/utils/request';
import { onMounted, ref } from 'vue';
import bread from './components/bread.vue';
import good from './components/good.vue';
import { useObserver } from '@/hooks/index';

//定义一个对象，用来暂存获取的信息
const sub = ref();
const currentPage = ref(1);
const pageSize = ref(20);
const goods = ref();
const pages = ref(1);
// 挂载获取二级信息
onMounted(async () => {
  const res = await http('get', '/category/sub/filter', { id });
  sub.value = res.data.result;
  console.log('sub', sub.value);
  getGood();
});
async function getGood() {
  if (currentPage.value == 1) {
    const res2 = await http('post', '/category/goods/temporary', {
      categoryId: id,
      page: currentPage.value,
      pageSize: pageSize.value,
    });
    console.log('res', res2);
    goods.value = res2.data.result.items;
    pages.value = res2.data.result.pages;
    currentPage.value++;
  } else {
    if (currentPage.value < pages.value) {
      const res2 = await http('post', '/category/goods/temporary', {
        categoryId: id,
        page: currentPage.value,
        pageSize: pageSize.value,
      });
      console.log('res', res2);
      goods.value = [...goods.value, ...res2.data.result.items];
      currentPage.value++;
    }
  }
}
const buttonId = ref(1);
function changeButton(index: number) {
  buttonId.value = index;
  // 排序的逻辑，只需要经过一系列的逻辑，将goods的数据进行排序即可。
}

const { target: end } = useObserver(getGood, true);
</script>
<template>
  <div class="sub">
    <XtxBread>
      <XtxBreadItem to="/">首页</XtxBreadItem>
      <XtxBreadItem>{{ sub?.parentName }}</XtxBreadItem>
      <XtxBreadItem>{{ sub?.name }}</XtxBreadItem>
    </XtxBread>
    <bread :sub="sub"></bread>
    <div class="box">
      <div class="sub-sort">
        <myButton
          class="button"
          @click="changeButton(1)"
          :type="buttonId == 1 ? 'info' : 'default'"
          >默认排序</myButton
        >
        <myButton
          class="button"
          @click="changeButton(2)"
          :type="buttonId == 2 ? 'info' : 'default'"
          >最新商品</myButton
        >
        <myButton
          class="button"
          @click="changeButton(3)"
          :type="buttonId == 3 ? 'info' : 'default'"
          >最高人气</myButton
        >
        <myButton
          class="button"
          @click="changeButton(4)"
          :type="buttonId == 4 ? 'info' : 'default'"
          >评论最多</myButton
        >
        <myButton
          class="button"
          @click="changeButton(5)"
          :type="buttonId == 5 ? 'info' : 'default'"
          >价格排序</myButton
        >
      </div>
      <ul class="goods_list">
        <good v-for="good in goods" :key="good.id" :good="good"></good>
      </ul>
    </div>
    <div ref="end"></div>
  </div>
</template>
<style lang="less" scoped>
.sub {
  margin: 0 10px;
}
.goods_list {
  flex-wrap: wrap;
  padding: 0 65px 30px;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
}
.box {
  margin-top: 25px;
  padding: 0 25px;
  background-color: #fff;
  .sub-sort {
    height: 80px;
    display: flex;
    align-items: center;

    .button {
      margin-right: 20px;
    }
  }
  ul {
    padding: 0px;
  }
}
</style>
